$(function () {

    class Container1 {
        constructor() {
            this.wrapper = $(".swiper-wrapper");
            this.data = {};
            this.price_sort = $(".price-sort");
            this.price_area = $(".area-submit");
            $.ajax({ url: "../../static/data/list_all.json" })
                .done((res) => {
                    this.data = res;
                    console.log(this.data);
                    this.bindEvent()
                    this.rander();
                    
                })
        }

        bindEvent() {
            var flag = 0;
            this.price_sort.on("click", ()=>{
                console.log(111);
                if(flag){
                    this.data = this.data.sort((a,b) => {
                        return Number(a['price'].slice(1)) - Number(b['price'].slice(1));
                    })
                    flag = 0
                }else{
                    this.data = this.data.sort((a,b) => {
                        return Number(b['price'].slice(1)) - Number(a['price'].slice(1));
                    })
                    flag = 1
                }
                this.rander(this.data);
            })

            this.price_area.on("click", () => {
                var area_data = [];
                var temp_data = [];
                console.log($(".min-size").val());
                for(let j = 0; j < this.data.length; j ++){
                    temp_data.push(this.data[j]);
                    if(Number(this.data[j].price.slice(1)) >= Number($(".min-size").val()) && Number(this.data[j].price.slice(1)) <= Number($(".max-size").val())){
                        area_data.push(this.data[j])
                    }
                }
                this.data = area_data;
                console.log(this.data);
                this.rander();
                this.data = temp_data;
            })

        }
        
        rander() {
            this.wrapper.html(" ")
            var tip = true;
            x:for (let i = 1; i < 5; i++) {
                let res = `<div class="swiper-slide">`
                for (let j = (i - 1) * 16; j < i * 16; j++) {
                    if ( j > this.data.length - 1){
                        tip = !tip;
                        break ;
                    }
                    
                    res += `<li data-index=${this.data[j].duct_id} class="ns-border-color-gray-fadeout-30-hover">
                    <div class="p-img" data-index=${this.data[j].duct_id}>
                        <a target="_blank" href="./detail.html#id=${this.data[j].duct_id}">
                            <img class="lazy swiper-lazy" data-src=${this.data[j].pics[0].big}
                                data-original=${this.data[j].pics[0].big}
                                style="display: inline;">
                        </a>
                    </div>
                    <div class="p-scroll">
                        
                        <div class="ps-wrap">
                            <ul class="ps-main">`
                    for (var k = 0; k < this.data[j].pics.length; k++) {
                        res += `<li class="ps-item" data-index=${this.data[j].duct_id}
                                data-max-src=${this.data[j].pics[k].big}>
                                <img src=${this.data[j].pics[k].samll}
                                    class="ns-border-color-gray small-pic">
                                </li>`
                    }
                    
                    res += `</ul>
                            </div>
                        </div>
                        <div class="p-price ns-text-color">
                            <i>${this.data[j].price}</i>
                        </div>
                        <div class="p-name">
                            <a target="_blank" href="./detail.html#id=${this.data[j].duct_id}">${this.data[j].name}</a>
                        </div>
                        <div class="p-icons">`
                    if (this.data[j].hot)
                        res += `<i class="icons icons-hot">热卖</i>`;
                    if (this.data[j].ne)
                        res += `<i class="icons icons-new">新品</i>`;

                    res += `</div>
                    </li>`

                }
                res += `</div>`
                this.wrapper.append(res);
                if(!tip)
                    break;
                // }
            }
            var mySwiper1 = new Swiper(".container1", {
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                lazy: {
                    loadPrevNext: true,
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '">' + (index + 1) + '</span>';
                    },
                    
                },
                speed: 800,
                loopAdditionalSlides: 1,
                observer: true,
                observeParents: true,
                simulateTouch: false,
                parallax: true,
            })

        }
    }


    new Container1()

})